<template>
	<div class="mdhw_table">
		<div class="Table_body zll-table" v-loading="loading">
			<el-table border style="width: 100%" tooltip-effect="dark" stripe
					  :data="getTableData"
					  @selection-change="handleSelect"
					  :cell-style="cellStyle"
					  :show-summary="showSummary"
					  :summary-method="getSummaries"
					  @cell-mouse-enter="cellMouseEnter"
					  @cell-mouse-leave="cellMouseLevel"
			>
				<el-table-column type="selection" width="40" v-if="isMultipleSelection"></el-table-column>
				<template v-for="(item, index) in getTableHeader">
					<el-table-column v-if="item.isSwitch"
									 :show-overflow-tooltip="true"
									 :prop="item.columnValue"
									 :label="item.columnName"
									 :sortable="item.isSortable"
									 :width="item.width?item.width:''"
					>
						<template slot-scope="scope">
							<slot v-if="item.isSwitch" :index="scope.$index">

								<el-switch v-if="item.columnValue == 'is_switch'" @change="changeSwitch(scope.row)"
										   v-model="scope.row.is_switch" active-color="#13ce66"
										   inactive-color="#c0c4cc"></el-switch>
							</slot>
						</template>
					</el-table-column>
					<el-table-column v-if="item.tableImage"
									 :prop="item.columnValue"
									 :label="item.columnName"
									 :width="item.width"
					>
						<template slot-scope="scope">
							<slot v-if="item.tableImage" :index="scope.$index">
								<img class="table_show_img" :src="scope.row.fileUrl" alt="">
							</slot>
						</template>
					</el-table-column>
					<el-table-column v-if="item.filterTag"
									 :prop="item.columnValue"
									 :label="item.columnName"
									 :width="item.width"
					>
						<template slot-scope="scope">
							<slot v-if="item.filterTag" :index="scope.$index">
								<el-tag v-if="scope.row[item.columnValue] == '待确认'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="info" v-if="scope.row[item.columnValue] == '待提交'
									|| scope.row[item.columnValue] == '已完成'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag class="cancel_tag" v-if="scope.row[item.columnValue] == '已取消'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="warning" v-if="scope.row[item.columnValue] == '待审批'
									|| scope.row[item.columnValue] == '待审核'
									|| scope.row[item.columnValue] == '待受理'
									|| scope.row[item.columnValue] == '待编制'
									|| scope.row[item.columnValue] == '待批准'
									|| scope.row[item.columnValue] == '待下发'
									|| scope.row[item.columnValue] == '待生产'
									|| scope.row[item.columnValue] == '保养中'
									|| scope.row[item.columnValue] == '待保养'
									|| scope.row[item.columnValue] == '待接单'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="danger" v-if="scope.row[item.columnValue] == '驳回' || scope.row[item.columnValue] == '过期未保'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="success" v-if="scope.row[item.columnValue] == '已下发'
									|| scope.row[item.columnValue] == '生产中'
									|| scope.row[item.columnValue] == '维修中'"
								>{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="success" v-if="scope.row[item.columnValue] == '在线'">{{scope.row[item.columnValue]}}</el-tag>
								<el-tag type="danger" v-if="scope.row[item.columnValue] == '故障'
									|| scope.row[item.columnValue] == '过期待保'"
								>{{scope.row[item.columnValue]}}</el-tag>
							</slot>
						</template>
					</el-table-column>
					<el-table-column v-if="!item.isSwitch && !item.tableImage && !item.filterTag"
									 :show-overflow-tooltip="true"
									 :prop="item.columnValue"
									 :label="item.columnName"
									 :sortable="item.isSortable"
									 :width="item.width?item.width:''"

					>
						<template slot-scope="scope">
							<span :class="{'left-align': item.leftAlign}"
								  :style="{'color':item.refColor?getColor(scope.row[item.columnValue]):(item.color?item.color:'')}">
								{{scope.row[item.columnValue]}}
							</span>
							<span @click="copyValue(scope.row[item.columnValue])" v-show="item.overFlow&&scope.row[item.columnValue+'flow']" style="color: #1890ff;cursor: pointer;position: absolute;margin-left: 5px"><i style="font-size: 14px;" class="el-icon-document-copy"></i></span>
						</template>
					</el-table-column>
				</template>

				<el-table-column label="操作" :width="scopeWidth" fixed="right" align="center" v-if="isOperate">
					<template slot-scope="scope">
						<slot :index="scope.$index"
							  :row="scope.row"
							  :currentPage="currentPage"
							  :pageSize="pageSize"
							  name="operate">
						</slot>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="zll-pagination" v-if="isPagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
						   :current-page="currentPage"
						   :page-sizes="[10, 20, 30, 40]"
						   :page-size="pageSize"
						   layout="total, sizes, prev, pager, next, jumper"
						   :total="totalCount">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			tableData: { //表格数据
				default: function () {
					return [];
				},
				type: Array
			},
			tableLoading: { //表格加载
				default: function () {
					return true;
				},
				type: Boolean
			},
			tableHeader: { //表头数据
				default: function () {
					return [];
				},
				type: Array
			},
			isMultipleSelection: {
				default: false,
				type: Boolean,
			},
			pageSizeParam: { //分页每页数量
				default: function () {
					return 10
				},
				type: Number
			},
			scopeWidth: { //右侧操作宽度
				default: 100,
				type: Number
			},
			isOperate: { //是否 显示操作
				default: true,
				type: Boolean,
			},
			isPagination: {//是否 显示分页
				default: true,
				type: Boolean,
			},
			showSummary: {//是否 显示合计
				default: false,
				type: Boolean,
			},
			isSortable: {//是否 排序
				default: false,
				type: Boolean,
			},
			filterTag: {//是否 tag
				default: false,
				type: Boolean,
			},
			backCount: {
				default: function () {
					return 0;
				},
				type: Number
			},
			isSwitch: {//是否 开关
				default: false,
				type: Boolean,
			},
			tableImage: {//是否 列表图片
				default: false,
				type: Boolean,
			},
			leftAlign: {//是否 td左对齐
				default: false,
				type: Boolean,
			}
		},
		data() {
			return {
				getTableData: [],//获取表格数据
				allTable: [],//复制表格数据
				getTableHeader: [],//获取表头
				loading: true,
				currentPage: 1,//当前页
				pageSize: 10,//每页数量
				totalCount: 0,//总页数
				multipleSelectData: [],//多选选中数据
			}
		},
		methods: {

			cellMouseEnter(row, column, cell, event){
				console.log(row)
				console.log(column);
				let property = column.property;
				let flow = property+'flow';
				this.$set(row,flow,true);
			},

			cellMouseLevel(row, column, cell, event){
				console.log(row)
				console.log(column);
				let property = column.property;
				let flow = property+'flow';
				this.$set(row,flow,false);
			},

			copyValue(textContent) {
				let inputDom = document.createElement('textarea'); // js创建一个文本框
				document.body.appendChild(inputDom); //将文本框暂时创建到实例里面
				inputDom.value = textContent;//将需要复制的内容赋值到创建的文本框中
				inputDom.select();//选中文本框中的内容
				inputDom.focus();
				document.execCommand('copy'); //执行复制操作
				document.body.removeChild(inputDom); //最后移出
				this.$message.success('复制成功')
			},
			getColor(value){
				if(value == '停用'){
					return 'red'
				}else if(value == '待入库'){
					return 'red'
				}else if(value == '待扣减'){
					return 'red'
				}else if(value == '待审核'){
					return 'red'
				} else if(value == '待出库'){
					return 'red'
				}else if(value == '未发送'){
					return 'red'
				} else if(value == '过期'){
					return 'red'
				}else if(value == '处理中'){
					return 'blue'
				}else if(value == '使用中'){
					return '#4caf50'
				}else if(value == '已扣减'){
					return '#4caf50'
				}else if(value == '在用'){
					return '#4caf50'
				}else if(value == '待点检'){
					return '#4caf50'
				}else if(value == '出库'){
					return 'red'
				}else if(value == '停机'){
					return 'red'
				}else if(value == '停工'){
					return 'red'
				}else if(value == '待审批'){
					return 'red'
				}else if(value == '已驳回'){
					return 'red'
				}else if(value == '已作废'){
					return 'red'
				}else if(value == '已通过'){
					return '#4caf50'
				}else if(value == '启用'){
					return '#4caf50'
				}else if(value == '待处理'){
					return '#ed2a2a'
				}else if(value == '待回复'){
					return '#b700d6'
				}else if(value == '已完成'){
					return '#4caf50'
				}else if(value == '未使用'){
					return '#BF9000'
				}else if(value == '清理已出库'){
					return '#4caf50'
				}else if(value == '订单已出库'){
					return '#4caf50'
				}else if(value == '生产已入库'){
					return '#4caf50'
				}else if(value == '整理已入库'){
					return '#4caf50'
				}else if(value == '退货已入库'){
					return '#4caf50'
				}

				return '';
			},

			resetPage(){
				this.currentPage = 1;
			},
			getSplitStr(val,clolumn){
				return val[clolumn];
			},
			changeSwitch(row) {
				this.$emit("changeSwitch", row);
			},
			handleSelect(val) { //多选选中
				this.multipleSelectData = val
				this.$emit("getSelection", val);
			},
			handleSizeChange(val) {//pagesize改变
				this.pageSize = val;
				this.upDateTable(this.currentPage, val)
			},
			handleCurrentChange(val) {//currentPage改变
				this.currentPage = val;
				this.upDateTable(val, this.pageSize)
			},

			getPageInfo(val){
				if(val == 0){
					return {pageNum:0,pageSize:this.pageSize};
				}
				return {pageNum:this.pageSize*(this.currentPage - 1),pageSize:this.pageSize};
			},

			upDateTable(pageNum, pageSize) {//分页刷新表格
				let start = pageSize * (pageNum - 1);
				let end = pageSize * pageNum;
				if (this.backCount == 0) {
					this.getTableData = this.allTable.slice(start, end)
				} else {
					this.$emit(
						"getBackData",
						pageSize * (pageNum - 1),
						pageSize
					);
				}
			},
			cellStyle({row, column, rowIndex, columnIndex}) {
				let name = column.property;
				let color = {backgroundColor: "", color: "",};
				if (name == 'backStatusCn') {//数据备份——备份状态
					if (row.backStatusCn == '成功') {
						color.backgroundColor = "#e1f3d8"
					} else {
						color.backgroundColor = "#fde2e2"
					}
				}
				if (name == 'fdStatusCn') {
					if (row.fdStatusCn == '待审批' || row.fdStatusCn == '已驳回' || row.fdStatusCn == '已作废') {
						color.color = "#ed2a2a"
					}else if (row.fdStatusCn == '已通过') {
						color.color = "#4caf50"
					}
				}
				if (name == 'onboardingStatusCn') {
					if (row.onboardingStatusCn == '合格在职') {
						color.color = "#4caf50"
					} else if (row.onboardingStatusCn == '试用在职') {
						color.color = "#ed2a2a"
					} else if (row.onboardingStatusCn == '离职') {
						color.color = "#9e9e9e"
					}
				}
				if (name == 'taskStatusCn') {
					if (row.taskStatusCn == '有效') {
						color.color = "#4caf50"
					} else if (row.taskStatusCn == '临期') {
						color.color = "#ed2a2a"
					} else if (row.taskStatusCn == '过期') {
						color.color = "#9e9e9e"
					}
				}
				if (name == 'accessAuthorizationCn') {
					if (row.accessAuthorizationCn == '启用') {
						color.color = "#4caf50"
					} else if (row.accessAuthorizationCn == '停用') {
						color.color = "#ed2a2a"
					}
				}
				return color;
			},
			getSummaries(param) {
				const {columns, data} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					if (column.property == 'tableNum5') {
						const values = data.map(item => Number(item[column.property]));
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += '';
					}
				});
				return sums;
			}
		},
		watch: {
			tableData(val) {
				if (this.backCount == 0) {
					this.getTableData = val.slice(0, this.pageSize * this.currentPage);
					this.totalCount = val ? val.length : 0;
				} else {
					this.getTableData = val;
					this.totalCount = this.backCount;
				}
				this.allTable = JSON.parse(JSON.stringify(val));
			},
			tableLoading(val) {
				this.loading = val;
			},
			tableHeader(val) {
				this.getTableHeader = val
			},
			pageSizeParam(val) {
				this.pageSize = val;
			}
		}
	}
</script>
<style>
	.mdhw_table .red{
		color:red;
	}
</style>
